<template>
    <el-dialog :model-value="dialogVisible" :title="type == 'add' ? '新增' : '编辑'" width="800px"
        :before-close="handleClose" append-to-body>
        <el-form ref="formRef" :model="dataForm" label-width="140px" :rules="rules" :inline="false">

            <el-form-item prop="companyCode" label="公司">
                <SelectSearch v-model="dataForm.companyCode" :value="dataForm.companyCode" :disabled="type=='edit'" :info="COMPANY_CONFIG" @on-selectListData="selectConmpany"  class="w100p"></SelectSearch>
            </el-form-item>
            <el-form-item label="不计税发票类型" prop="invoiceTypeList">
                <el-select v-model="dataForm.invoiceTypeList" class="w100p" multiple>
                    <el-option v-for="item in invoiceTypeOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import api from "@/api/index";
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive } from 'vue';
import { statusText } from '@/util/index'
import {COMPANY_CONFIG } from './config'
export default {
    props: {

        dialogVisible: {
            type: Boolean,
            default: false
        },
        type: {
            default: 'add',
            type: String

        },
        dataForm: {
            type: Object,
            default: () => { }
        },
        invoiceTypeOptions: {
            type: Array,
            default: () => []
        },

    },
    emits: ['on-update', 'handleClose'],
    setup(props, context) {
        const state = reactive({
            formRef: null,
            rules: {
                invoiceTypeList: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'blur'
                    }
                ],

                companyCode: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'blur'
                    }
                ]
            },
            COMPANY_CONFIG
        })


        const handler = {

            // 关闭
            handleClose() {
                state.formRef.resetFields()
                state.formRef.clearValidate()
                context.emit('handleClose')

            },

            submit() {
                if (!state.formRef) return
                state.formRef.validate(valid => {
                    if (valid) {
                        let data = {
                            ...props.dataForm
                        }
                        const interFaceObj = {
                            'add': 'addNoTax',
                            'edit': 'editNoTax'
                        }
                        data.companyName = statusText(state.companyList, data.companyCode, 'companyName','companyCode')
                        api.taxConfig[interFaceObj[props.type]](data).then(res => {
                            context.emit('on-update')
                            handler.handleClose()
                            ElMessage.success('操作成功')
                        })

                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            },
            selectConmpany(list) {
                console.log(list)
                state.companyList = list
            }


        }


        return {
            ...toRefs(state),
            ...handler
        }
    }
}


</script>



<style lang="scss" scoped>
.w100p {
    width: 100%;
}
</style>